<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>选择车型</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" href="../css/mui.min.css">
	<link rel="stylesheet" href="../css/common.css" />
	<style>
		body,.mui-content {
			background: #F4F2F5;
		}
		.mui-bar-nav {
			background: #86CAF9;
		}
		.mui-bar .mui-icon {
			color: #fff;
		}
		.mui-title {
			color: #fff;
		}
		.mui-row.mui-fullscreen>[class*="mui-col-"] {
			height: 100%;
		}
		.mui-col-xs-3,
		.mui-control-content {
			overflow-y: auto;
			height: 100%;
		}
		.mui-segmented-control .mui-control-item {
			line-height: 50px;
			width: 100%;
		}
		.mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item {
			border: 0;
		}
		 .mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item.mui-active {
		 	border: 0;
		 	border-left: 1px solid #5BA9F9;
		 }
		.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
			background-color: #fff;
		}
		.list-li {
			padding-left: 15px;
			padding-bottom: 20px;
			margin-bottom: 10px;
			background: #fff;
		}
		.car-img-info {
			padding-top: 25px;
			padding-bottom: 10px;
			border-bottom: 1px solid #E1E1E1;
			display: flex;
			align-items: flex-start;
		}
		.car-img {
			width: 75px;
			height: 50px;
		}
		.car-info {
			margin-left: 30px;
		}
		.car-title {
			font-size: 16px;
			font-family:PingFang SC;
			font-weight: bold;
			color: #333;
		}
		.car-type {
			margin-top: 5px;
			font-size: 14px;
			font-family:PingFang SC;
			color: #333;
		}
		.car-score {
			margin-top: 15px;
			font-size: 14px;
			font-family:PingFang SC;
			font-weight:bold;
			color: #5BA9F9;
		}
		.car-address {
			margin-top: 5px;
			font-size: 12px;
			font-family:PingFang SC;
			font-weight:bold;
			color: #666666;
		}
		.car-day-price {
			margin-top: 5px;
			font-size: 12px;
			font-family:PingFang SC;
			font-weight:bold;
			color: #999;
		}
		.car-price {
			font-size: 16px;
			color: #FD5C5C;
		}
		.no-data {
			display: none;
			width: 100%;
			height: 200px;
			background: #fff;
			line-height: 200px;
			text-align: center;
			font-size: 14px;
			color: #333;
		}
	</style>
</head>
<body>
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">选择车型</h1>
	</header>
	<div class="mui-content mui-row mui-fullscreen">
		<div class="mui-col-xs-3">
			<div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
				<a class="mui-control-item mui-active" data-option="0" href="#item1"><input type="hidden" name="carTypeId" value="" />全部</a>
			</div>
		</div>
		<div id="segmentedControlContents" class="mui-col-xs-9">
			<div id="item1" class="mui-control-content mui-active">
				<div class="list-ul">
					<!--<div class="list-li">
						<div class="car-img-info">
							<img class="car-img" src="../img/rentCar/rent-car-back.jpg" />
							<div class="car-info">
								<div class="car-title">大发Move</div>
								<div class="car-type">自动挡/5座/小型轿车</div>
							</div>
						</div>
						<div class="car-score">4.3分 7条评论</div>
						<div class="car-address">车行地址：观山湖区</div>
						<div class="car-day-price">¥<span class="car-price">235</span>/天</div>
					</div>-->
				</div>
				<div class="no-data">暂无数据</div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="../js/thirdparty/jquery-3.3.1.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/mui.min.js" ></script>
	<script type="text/javascript" src="../js/utils/boot.js" ></script>
	<script>
		var customerId = base.getParameter("customerId");
		var cityName = base.getParameter("cityName");
		var carTypeId = '';
		var initList = [1];
		$(function() {
			getCarTypeList();
			getCarList();
		});
		function getCarTypeList() {
			base.postData(base.url.getCarTypeList, {}, function(data) {
				if (data.success) {
					var html = '';
					var content = '';
					for (var i=0; i<data.extendData.carTypeList.length; i++) {
						initList.push(0);
						html += '<a class="mui-control-item" data-option="'+(i+1)+'" href="#item'+(i+2)+'">'+
								'<input type="hidden" name="carTypeId" value="'+data.extendData.carTypeList[i].carTypeId+'" />'+
								data.extendData.carTypeList[i].carTypeName+'</a>';
						content += '<div id="item'+(i+2)+'" class="mui-control-content"><div class="list-ul"></div><div class="no-data">暂无数据</div></div>';		
					}
					$("#segmentedControls").append(html);
					$("#segmentedControlContents").append(content);
				}
			});
		}
		$("#segmentedControls").on('tap', '.mui-control-item', function() {
			var _carTypeId = $(this).find("input[name='carTypeId']").val();
			if (_carTypeId == carTypeId) {
				return;
			}
			carTypeId = _carTypeId;
			var index = $(this).attr("data-option");
			if (initList[index] == 0) {
				initList[index] = 1;
				getCarList();	
			}
		});
		function getCarList() {
			var params = {
				carTypeId: carTypeId,
				cityName: cityName
			}
			base.postData(base.url.getCarList, params, function(data) {
				if (data.success) {
					var html = "";
					for (var i=0; i<data.extendData.carList.length; i++) {
						html += pingCarList(data.extendData.carList[i]);
					}
					var itemx = $("#segmentedControlContents").find(".mui-control-content.mui-active");
					$(itemx).find(".list-ul").html(html);
					if (data.extendData.total == 0) {
						$(itemx).find(".no-data").show();
					}
				}
			});
		}
		function pingCarList(data) {
			var html = '<div class="list-li">'+
						'	<input type="hidden" name="carId" value="'+data.carId+'" />'+
						'	<div class="car-img-info">'+
						'		<img class="car-img" src="'+data.carImg+'" />'+
						'		<div class="car-info">'+
						'			<div class="car-title">'+data.carName+'</div>'+
						'			<div class="car-type">'+data.gear+'/'+data.seat+'座/'+data.carTypeName+'</div>'+
						'		</div>'+
						'	</div>'+
						'	<div class="car-score">'+data.avgStars+'分 '+data.evaluationCount+'条评论</div>'+
						'	<div class="car-address">车行地址：'+data.detailedAddress+'</div>'+
						'	<div class="car-day-price">¥<span class="car-price">'+data.price+'</span>/天</div>'+
						'</div>';
			return html;
		}
		$("#segmentedControlContents").on('tap', '.list-li', function() {
			var carId = $(this).find("input[name='carId']").val();
			window.location.href = "rentCarInfo.html?customerId="+customerId+"&carId="+carId;
		});
	</script>
</body>
</html>
